<template>
  <div class="public-shop-account">
    <div class="content">
      <div class="shop-account-head">填写并核对订单信息</div>
      <div class="shop-account-info">
        <div class="edit-address">
          <div class="address-head">
            <span>收货人信息</span>
            <a href="">新增收货地址</a>
          </div>
          <div class="address-info">
            <span>家里</span>
            <span>xxx xx省xx市xx街道</span>
            <a href="">编辑</a>
          </div>
        </div>
        <div class="edit-pay">
          <div class="pay-head">支付方式</div>
          <div class="pay-info">
            <span>货到付款</span>
            <span>在线支付</span>
            <a href="">更多>></a>
          </div>
        </div>
      </div>
      <div class="shop-account-detail">
        <div class="account-address">
          <span
            ><i>{{ palyGoods.num }}</i> 件商品，总商品金额：</span
          >
          <span>&yen;{{ palyGoods.sumPrice }}</span>
          <span>运费：</span>
          <span><i>&yen;0.00</i></span>
          <span>商品优惠：</span>
          <span>-￥5.00</span>
        </div>
        <div class="account-pay">
          <span>
            应付总额： <i>&yen;{{ palyGoods.sumPrice - 5 }} </i></span
          >
          <span>寄送至:xxxx xxxxxxxx 收货人:xxx 电话：</span>
        </div>
        <div class="account-btn">
          <el-button class="btn" @click="paly()">提交订单</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { addOrder,delCart } from "@/api/api.js";
import {getTime} from "@/js/hangTime.js"
import { reactive } from "vue";
import { useStore } from "vuex";
export default {
  name: "SettleAccounts",
  setup() {
    const route = useRoute();
    const router = useRouter();
    const store = useStore();
    const palyGoods = reactive({
      num: "",
      sumPrice: "",
      list: "",
    });
    palyGoods.sumPrice = route.query.sumPrice;
    palyGoods.num = route.query.num;
    palyGoods.list = JSON.parse(route.query.data);
    // 用户id
    const id = store.state.userInfo.info.id;
    // 提交订单
    const paly = () => {
      console.log("订单提交");
      console.log(palyGoods.list);
      ElMessageBox.confirm("是否提交订单!", {
        confirmButtonText: "是",
        cancelButtonText: "否",
      }).then(() => {
        let list =[]
        let data={}
        for (let i = 0; i < palyGoods.list.length; i++) {
           let info = palyGoods.list[i];
          list.push(info)
        }
        data.userId = id
        data.order = list
        data.orderTime = getTime()
        data.sumPrice = palyGoods.sumPrice - 5
        console.log(data);
        addOrder("post", data).then((res) => {
          ElMessage({
            message: "订单已提交",
            type: "success",
            duration:"400"
          });
          console.log(res.data);
          router.push("OrderCenter");
        }).then(()=>{
          list.forEach((e) => {
           delCart("DELETE",e.id)
          });
          
        })
      });
    };
    return { palyGoods, paly };
  },
};
</script>

<style lang="scss" scoped>
.public-shop-account > .content {
  width: 70%;
  min-width: 1090px;

  background-color: #fff;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
}
.public-shop-account > .content > .shop-account-head {
  margin: 10px 5px;
  font-size: 16px;
}
.public-shop-account > .content > .shop-account-info {
  border: 1px solid #ccc;
  padding: 10px;
}
.public-shop-account > .content > .shop-account-info > .edit-address {
  border-bottom: 1px solid #ccc;
}
.public-shop-account
  > .content
  > .shop-account-info
  > .edit-address
  > .address-head {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}
.public-shop-account
  > .content
  > .shop-account-info
  > .edit-address
  > .address-head
  > span {
  font-size: 14px;
  font-weight: bold;
}
.public-shop-account
  > .content
  > .shop-account-info
  > .edit-address
  > .address-head
  > a {
  color: #005ea7;
  font-size: 12px;
}
.public-shop-account
  > .content
  > .shop-account-info
  > .edit-address
  > .address-head
  > a:hover {
  color: #e2231a;
}
.public-shop-account
  > .content
  > .shop-account-info
  > .edit-address
  > .address-info {
  display: flex;
  padding: 20px;
  justify-content: space-between;
}
.public-shop-account
  > .content
  > .shop-account-info
  > .edit-address
  > .address-info
  > span:first-of-type {
  width: 120px;
  height: 30px;
  border: 3px solid #e2231a;
  text-align: center;
  margin-right: 10px;
  font-size: 16px;
  line-height: 30px;
}
.public-shop-account > .content > .shop-account-info > .edit-pay > .pay-head {
  font-size: 14px;
  font-weight: bold;
  padding: 20px 0;
}
.public-shop-account > .content > .shop-account-info > .edit-pay > .pay-info {
  display: flex;
  align-items: center;
}
.public-shop-account
  > .content
  > .shop-account-info
  > .edit-pay
  > .pay-info
  > span {
  width: 100px;
  height: 30px;
  border: 2px solid #ccc;
  margin: 10px;
  text-align: center;
  line-height: 30px;
}
.public-shop-account
  > .content
  > .shop-account-info
  > .edit-pay
  > .pay-info
  > span:hover {
  border: 2px solid #e2231a;
}
.public-shop-account > .content > .shop-account-detail > .account-address {
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 150px;
  grid-template-rows: repeat(3, 30px);
  justify-items: end;
}
.public-shop-account > .content > .shop-account-detail > .account-address i {
  font-style: normal;
  color: #e2231a;
}
.public-shop-account > .content > .shop-account-detail > .account-pay {
  height: 80px;
  background-color: #eee;
  border: 1px solid #ccc;
  display: flex;
  padding: 10px 20px 0 0;
  flex-direction: column;
  align-items: flex-end;
}
.public-shop-account
  > .content
  > .shop-account-detail
  > .account-pay
  > span
  > i {
  font-style: normal;
  font-size: 20px;
  color: #e2231a;
}
.public-shop-account > .content > .shop-account-detail > .account-btn {
  display: flex;
  justify-content: flex-end;
}
.public-shop-account > .content > .shop-account-detail > .account-btn > button {
  border: none;
  background-color: #e2231a;
  color: #fff;
  width: 120px;
  height: 40px;
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0;
}
.btn {
  width: 100px;
  height: 100%;
  font-size: 20px;
  color: #fff;
  border: none;
  background-color: #e2231a;
}
</style>